<template>
	<div class="clock">
		<slot></slot>
		<p>{{message}}</p>
		<br>
		<p>{{ currentTime }}</p>

	</div>
</template>

<script>
	export default {
		props: {
			message: String
		},
		data() {
			return {
				currentTime: ''
			};
		},
		created() {
			console.log('创建定时器clock created')
			this.updateTime();
			this.interval = setInterval(this.updateTime, 1000);
		},
		
		methods: {
			updateTime: function() {
				console.log('updateTime...')
				let now = new Date();
				let hours = now.getHours().toString().padStart(2, '0');
				let minutes = now.getMinutes().toString().padStart(2, '0');
				let seconds = now.getSeconds().toString().padStart(2, '0');
				this.currentTime = `${hours}:${minutes}:${seconds}`
			}
		}
	};
</script>

<style>
	.clock {
		font-size: 18px;
		text-align: center;
		font-weight: bold;
		position: absolute;
		top: 24px;
		left: 23px;

	}
</style>